// @ts-nocheck
import { Color } from '@tiptap/extension-color'
import ListItem from '@tiptap/extension-list-item'
import TextStyle from '@tiptap/extension-text-style'
import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import { ReactNodeViewRenderer, EditorProvider } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import TextAlign from '@tiptap/extension-text-align'
import Underline from '@tiptap/extension-underline'
import EditBtns from './EditBtns'
import { useState } from 'react'
import './index.less'
import { TableOfContents, getHierarchicalIndexes } from '@tiptap-pro/extension-table-of-contents'

import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
import Highlight from '@tiptap/extension-highlight'
import { lowlight } from 'lowlight'
import css from 'highlight.js/lib/languages/css'
import js from 'highlight.js/lib/languages/javascript'
import ts from 'highlight.js/lib/languages/typescript'
import html from 'highlight.js/lib/languages/xml'
import python from 'highlight.js/lib/languages/python';
import java from 'highlight.js/lib/languages/java';
import c from 'highlight.js/lib/languages/c';
import cpp from 'highlight.js/lib/languages/cpp';
import csharp from 'highlight.js/lib/languages/csharp';
import ruby from 'highlight.js/lib/languages/ruby';
import php from 'highlight.js/lib/languages/php';
import go from 'highlight.js/lib/languages/go';
import swift from 'highlight.js/lib/languages/swift';
import kotlin from 'highlight.js/lib/languages/kotlin';
import scala from 'highlight.js/lib/languages/scala';
import dart from 'highlight.js/lib/languages/dart';
import rust from 'highlight.js/lib/languages/rust';
import sql from 'highlight.js/lib/languages/sql';
import Link from '@tiptap/extension-link'

import CodeBlockComponent from './CodeBlockComponent'

lowlight.registerLanguage('html', html)
lowlight.registerLanguage('css', css)
lowlight.registerLanguage('js', js)
lowlight.registerLanguage('ts', ts)
lowlight.registerLanguage('python', python);
lowlight.registerLanguage('java', java);
lowlight.registerLanguage('c', c);
lowlight.registerLanguage('cpp', cpp);
lowlight.registerLanguage('csharp', csharp);
lowlight.registerLanguage('ruby', ruby);
lowlight.registerLanguage('php', php);
lowlight.registerLanguage('go', go);
lowlight.registerLanguage('swift', swift);
lowlight.registerLanguage('kotlin', kotlin);
lowlight.registerLanguage('scala', scala);
lowlight.registerLanguage('dart', dart);
lowlight.registerLanguage('rust', rust);
lowlight.registerLanguage('sql', sql);


const TipTapEditor = ({ content = '', style, getEditHTML,isToC=false,getItems }: { content?: string; style?: CSSProperties, getEditHTML?: (str: string) => void; isToC?: boolean;getItems?:(items:any) => void; }) => {
  const [items, setItems] = useState([])
  const extensions = [
    Underline,
    // HardBreak,
    Color.configure({ types: [TextStyle.name, ListItem.name] }),
    TextStyle.configure({ types: [ListItem.name] }),
    TaskList,
    TaskItem.configure({
      nested: true,
    }),
    TextAlign.configure({
      types: ['heading', 'paragraph'],
    }),
    StarterKit.configure({
      bulletList: {
        keepMarks: true,
        keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
      },
      orderedList: {
        keepMarks: true,
        keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
      },
    }),
    Highlight.configure({
      multicolor: true,
    }),
    Link.configure({
      HTMLAttributes: {
        // rel: 'noopener noreferrer',
        rel: null,
        target: '_blank',
      },
    }),
    CodeBlockLowlight
      .extend({
        addNodeView() {
          return ReactNodeViewRenderer(CodeBlockComponent)
        },
      })
      .configure({ lowlight }),
    TableOfContents.configure({
      getIndex: getHierarchicalIndexes,
      onUpdate(content) {
        setItems(content)
        getItems&&getItems(content)
      },
    }),
  ]
  return (<div style={{...style,paddingRight: isToC && '24rem'}} className={'TipTapEditor'}>
    <EditorProvider style={style} slotBefore={<EditBtns isToC={isToC} items={items} getEditHTML={getEditHTML} />} extensions={extensions} content={content}></EditorProvider>
  </div>
  )
}
export default TipTapEditor